<template>
    <div class="navbarContainer">
        <el-form ref="form"
                :model="form"
                label-width="140px"
                @submit.native.prevent
                >
            <el-row>
                <el-col :span="10" :xs="20" :sm="19" :md="19" :lg="19" :xl="20">
                    <el-form-item >
                        <template slot="label">
                            {{M2('服务器')}}:
                        </template>
                        <el-radio-group size="mini"  v-model="form.serviceCode">
                            <el-radio-button @click.native="clickRadioSearch('serviceCode',null,$event)" :label="null">{{ M2('全部') }}</el-radio-button>
                            <el-radio-button @click.native="clickRadioSearch('serviceCode',item,$event)" v-for="item in serverList" :key="item" :label="item">{{ M2(item) }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :xs="4" :sm="5" :md="5" :lg="5" :xl="4">
                    <el-form-item label-width="10px">
                        <div class="searchBox">
                            <el-input :placeholder="M2('发布id')"
                                v-model="putSearch"
                                size='mini'
                                class="input-with-select"
                                clearable
                                @change="searchSomething"
                                @keyup.enter.native="searchSomething"
                                >
                            </el-input>
                            <el-button type="primary" @click="searchSomething">{{M2('搜索')}}</el-button>
                            <!-- <el-checkbox  class="search-check" v-model="form.selectCheck" :label="1">{{M2('在筛选条件中搜索')}}</el-checkbox>
                            <span class="more-search" @click="clickSearchMore()"  v-track="{triggerType:'click',currentUrl: $route.path,behavior:'批量查询'}">
                                {{M2('批量查询')}}
                            </span> -->
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="10" :xs="20" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item >
                        <template slot="label">
                            {{M2('项目类型')}}:
                        </template>
                        <el-radio-group size="mini"  v-model="form.programType">
                            <el-radio-button @click.native="clickRadioSearch('programType',item.label,$event)" v-for="item in programTypeList" :key="item.label" :label="item.label">{{ M2(item.name) }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :xs="20" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item >
                        <template slot="label">
                            {{M2('发布类型')}}:
                        </template>
                        <el-radio-group size="mini"  v-model="form.type">
                            <el-radio-button @click.native="clickRadioSearch('type',item.label,$event)" v-for="item in typeList" :key="item.label" :label="item.label">{{ M2(item.name) }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
             </el-row>
             <el-row>
                <el-col :span="10" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item >
                        <template slot="label">
                            {{M2('项目名称')}}:
                        </template>
                        <!-- <el-radio-group size="mini"  v-model="form.programInfoId">
                            <el-radio-button @click.native="clickRadioSearch('programInfoId',null,$event)" :label="null">{{ M2('全部') }}</el-radio-button>
                            <el-radio-button @click.native="clickRadioSearch('programInfoId',item,$event)" v-for="item in programInfoIdList" :key="item" :label="item">
                                {{ M2(item) }}
                            </el-radio-button>
                        </el-radio-group> -->
                            <el-radio-group size="mini"  v-model="form.programInfoId">
                                <el-radio-button @click.native="clickRadioSearch('programInfoId',null,$event),clickPid()" :label="null">{{ M2('全部') }}</el-radio-button>
                            </el-radio-group>
                            <el-tooltip effect="light" popper-class="popper-tooltip" content="" placement="bottom" v-for="(item,index) in categoryProgramInfoIdList" :key="item.id" :open-delay="300">
                                <div slot="content" v-if="item.items.length > 0">
                                    <div class="tooltip-text">{{categoryListfn(index)}}</div>
                                    <el-radio-group size="mini"  v-model="form.programInfoId">
                                        <el-radio-button v-for="(item1) in item.items" size="mini" style="margin-right: 5px;" :key="item1.value" :label="item1.label"  @click.native="clickRadioSearch('programInfoId',item1.label,$event),showProgramInfoId(index,item1.value)">{{item1.value}}</el-radio-button>
                                    </el-radio-group>
                                    <!-- <el-radio-button v-for="item1 in item.items"  v-model="form.programInfoId" :options="item.items" @change="handleChangeCategoryTwo($event, item.label)" :props="{ expandTrigger: 'hover' }">{{item.value}}</el-radio-button> -->
                                </div>
                                <el-radio-group size="mini" :disabled="true" class="disabled-el-group" v-model="form.programInfoId1">
                                    <el-radio-button :label="item.label">{{item.value}}</el-radio-button>
                                </el-radio-group>
                            </el-tooltip>
                            <!-- <div>
                                <el-radio-group size="mini"  v-model="form.programInfoId">
                                    <el-radio-button @click.native="handleChangeCategory(item.label)" :label="item.label">{{item.value}}</el-radio-button>
                                </el-radio-group>
                            </div> -->
                        <div>
                        </div>                   
                    </el-form-item>
                </el-col>
             </el-row>
        </el-form>
        <searchMoreDialog ref="searchMoreDialog" @searchMorething='searchMorething'></searchMoreDialog>
    </div>
</template>
<script>
import { trim } from '@/utils/tools.js';
import { getProgramReleaseInfo,getProgramInfo } from '@/api/user.js'
export default {
    name: 'releaseManagementNaver',
    components:{
        searchMoreDialog:() => import('@/components/common/searchMoreDialog'),
    },
    data () {
        return {
            putSearch:null,
            tooltipName:null,
            // 1:未提交  2：待分配   3：样品确认中   4：结果输出中   5：合格    6：改进后通过(产前样)    7：不合格     8：已取消
            timeList:[
                {
                    name:'全部',
                    label:null,
                },
               
                {
                    name:'正常',
                    label:0,
                },
                {
                    name:'禁用',
                    label:11,
                },
            ],
            programTypeList:[
                {
                    name:'全部',
                    label:null,
                },
                {
                    name:'Web',
                    label:'1'
                },
                {
                    name:'Service',
                    label:'2'
                },
                {
                    name:'App',
                    label:'3'
                },
            ],
            typeList:[
                {
                    name:'全部',
                    label:null,
                },
                {
                    name:'待发布',
                    label:'0'
                },
                {
                    name:'已发布',
                    label:'1'
                },
                {
                    name:'已回滚',
                    label:'2'
                },
                {
                    name:'待审核',
                    label:'11'
                },
            ],
            serverList:[],
            programInfoIdList:[],
            form: {
                // status: null ,//状态   1:未提交  2：待分配   3：样品确认中   4：结果输出中   5：合格    6：改进后通过(产前样)    7：不合格     8：已取消
                search: null, //搜索(供应商、开发ID、sku别名、sku、申请单号)
                serviceCode:null,
                type:0,
                programType:null,
                programInfoId:null,
            },
            categoryProgramInfoIdList:[],//分类处理
        }
    },
    watch:{
        form:{
            handler:function(val){
                this.tableParams = val
                this.$emit('putTableList',this.tableParams)          
            },
            deep:true
        },
    },
    created() {
        // this.init()
    },
    mounted(){
        this.$nextTick(res => {
            if(this.$route.query.search){
                this.putSearch = this.$route.query.search
            }
        })
        this.addTitleLable()
        this.init()
    },
    methods: {
        categoryListfn(i){
            let filterList = this.categoryProgramInfoIdList.filter(item => {
                return item.items.length > 0
            })
            return filterList[i].label
        },
        addTitleLable(){
            document.querySelectorAll('.navbarContainer .el-form-item__label').forEach(item => {
                if(!item.getAttribute('title')){
                    item.setAttribute('title',item.innerHTML)
                }                
            })
        },
        init() {
            getProgramReleaseInfo().then(res => {
                this.serverList = res.data
            })
            getProgramInfo().then(res => {
                this.programInfoIdList = res.data;
                // this.categoryProgramInfoIdList = 
                this.categorizeItems();
                // console.log("项目分类111" + JSON.stringify(this.programInfoIdList)) ;
                // console.log("项目分类" + JSON.stringify(this.categoryProgramInfoIdList)) ;
            })
        },
        categorizeItems() {
            let categories = [
                    "PMS",
                    "WMS",
                    "LBS",
                    "Listing",
                    "OMS",
                    "CRM",
                    "Common",
                    "PMC",
                    "PDC",
                    "Report",
                    "AmazonListing",
                    "Portal",
                    "Amazon",
                    "Sync"
                ];

            // 初始化分类数据
            this.categoryProgramInfoIdList = categories.map(category => ({
                label: category, 
                value: category,
                items: []
            }))

            // 添加一个"其他"分类
            this.categoryProgramInfoIdList.push({
                label: '其他', 
                value: '其他',
                items: [
              
                ]
            });

            // 循环处理每个元素
            this.programInfoIdList.forEach(item => {
                // debugger
                let found = false;
                // 检查是否以分类数组中的某一项字符开头
                categories.forEach((category, index) => {
                    if (item.startsWith(category)) {
                        var aa = {"label": item, "value": item}
                        // 如果找到匹配的分类，将元素添加到该分类中
                        this.categoryProgramInfoIdList[index].items.push(aa);
                        found = true;
                    }
                });
                // 如果没有找到匹配的分类，将元素添加到"其他"分类中
                if (!found) {
                        var aa = {"label": item, "value": item}
                    this.categoryProgramInfoIdList[this.categoryProgramInfoIdList.length - 1].items.push(aa);
                }
            });
            this.categoryProgramInfoIdList = this.categoryProgramInfoIdList.filter(item => {
                return item.items.length > 0
            })
            this.copeCategoryProgramInfoIdList = JSON.parse(JSON.stringify(this.categoryProgramInfoIdList)) 
        },
        searchMorething(list){
            this.searchMore = { 
                parametersType:list.parametersType,
                parameters:list.parameters,
            }
            this.$emit('putTableList',this.searchMore)
        },
        clickSearchMore() {
            this.$refs.searchMoreDialog.openDialog()
        },
        clickRadioSearch(name,value,el) {
            if (el.target.tagName === 'INPUT') return
            this.$set(this.form,name,value)
            this.$set(this.form,'search1',false)
            this.$set(this.form,'almorlist',Math.random())
        },
        clickPid(){
             this.$set(this.form,'programInfoId1',null)
        },
        showProgramInfoId(index,label){
            this.categoryProgramInfoIdList = JSON.parse(JSON.stringify(this.copeCategoryProgramInfoIdList))
            // let val = this.categoryProgramInfoIdList[index].label
            this.categoryProgramInfoIdList[index].value = `${this.categoryProgramInfoIdList[index].label}:${label}`
            this.$set(this.form,'programInfoId1',this.categoryProgramInfoIdList[index].label)
        },
        searchSomething(){
            this.$set(this.form,'search',trim(this.putSearch))
            this.$set(this.form,'search1',true)
            this.$set(this.form,'almorlist',Math.random())
        },
    
    }
}
</script>

<style  lang="scss" scoped>
::v-deep.checkbox-status {
    display: inline-block;
    .el-checkbox.is-bordered {
        margin-right: 0px;
        margin-left: 5px;
        height: 25px;
        top: 2px;
        padding: 2px 3px;
    }
}
.navbarContainer {
    padding: 5px;
    background-color: #ffffff;
    ::v-deep .el-form-item__label {
        color: #3366cc !important;
        font-weight: bold; 
        line-height: 30px; 
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 10px;
    }
    ::v-deep .el-form-item__content{
        font-size: 12px !important;
        line-height: 30px;
    }
    ::v-deep .el-form-item {
        margin-bottom: 0px;
    }
    ::v-deep .el-radio-button{
        line-height: 2;
        margin: 3px 4px;
        .el-radio-button__inner {
            padding: 5px 10px;
            color: #333 ;
            border-radius: 2px;
            border: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            &:hover {
                border: 1px solid #3366cc;
                border-left: 1px solid #3366cc;
                color: #3366cc;
            }
        }  
    }
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        box-shadow: 0px 0 0 0 #3366cc;
        color: #ffff;
    }
   
    ::v-deep .success-radio {
        border: 1px solid #ccc;
        display: inline-block;
        margin-right: 10px;
        height: 25px;
        line-height: 25px;
        position: relative;
        top: 5px;
        padding-right: 10px;
        background: #e8f0f7;
        .el-radio__input {
            border-right:1px solid #ccc;
            line-height: 23px;
        }
    }
}
.searchBox{
    display: flex;
    .el-button{
        height: 28px;
        margin-top: 1px;
        line-height: 3px;
        padding: 12px 12px;
        font-size: 12px;
        margin-right: 10px;
    }
    .more-search {
        color: #3366cc;
        position: absolute;
        right: 10px;
        bottom: -25px;
        cursor: pointer;
        z-index: 111;
    }
    .search-check {
        position: absolute;
        bottom:-25px;
        left: 0;
    }
}
/* 父级不可点击 */
::v-deep .disabled-el-group {
        .el-radio-button__inner {
            cursor: default !important;
        }  
    }
    ::v-deep.navbarContainer .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #3366cc;
    }
</style>
<style>
    .is-active .el-radio-button__inner {
        color: #fff !important;
    }
    .popper-tooltip {
        max-width: 80%;
         transform:translate(0,-10px);
        /* top: 59px !important; */
        left: 160px !important;
        min-width: 600px;
        padding: 2px 10px;
        border: 1px solid #3366cc !important;
    }
    .popper-tooltip .el-radio-button {
        margin-bottom:3px;
    }
    .popper-tooltip .el-radio-button__inner {
        border-left: 1px solid #DCDFE6 !important;
    }
    .popper-tooltip .popper__arrow {
        display: none;
       
    }
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        border-left: none !important;
    }
    .tooltip-text{
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        padding: 5px 0px;
        margin-bottom: 3px;
        border: 1px solid #6D92B8;
        border-radius: 4px;
        background-color: #E8F0F7;
     }
</style>